<template>
  <div class="chart-container">
    <v-chart class="chart" :option="chart" autoresize />
    <div class="chart-info">
      <div class="title1">{{ title }}</div>
      <div class="value-container">
        <div class="value">{{ tons }}</div>
        <div class="unit">{{ unit }}</div>
      </div>
    </div>
  </div>
</template>

<script>
// eslint-disable-next-line no-unused-vars
import * as echarts from "echarts";
// 引入vue-echarts
import VChart from "vue-echarts";
// 标准作业线
export default {
  name: "DischargeChartBt",
  components: { VChart },
  props: {
    height: {
      type: [String, Number],
      default() {
        return "250";
      },
    },
    iconImage: {
      type: String,
      default: "ht.png",
    },
    title: {
      type: String,
      default: "历史最高",
    },
    value: {
      type: Number,
      default: 78,
    },
    tons: {
      type: Number,
      default: 78,
    },
    unit: {
      type: String,
      default: "万吨",
    },
    ringColor: {
      type: [String, Array],
      default: "#4bf3f9",
    },
  },
  data() {
    const angle = 0; // 角度，用来做简单的动画效果的
    return {
      diosho: false,
      iframeTitle: "",
      iframeSrc: "",
      tabledata: [],
      chart: {
        textStyle: {
          fontSize: this.$utils.transformFontSize(16),
        },
        backgroundColor: "transparent",

        series: [
          // 内环
          {
            name: "",
            type: "custom",
            center: ["50%", "45%"],
            coordinateSystem: "none",

            renderItem: function(params, api) {
              return {
                type: "arc",
                shape: {
                  cx: api.getWidth() / 2,
                  cy: api.getHeight() / 2.2,
                  r: (Math.min(api.getWidth(), api.getHeight()) / 2.3) * 0.65,
                  startAngle: ((0 + -angle) * Math.PI) / 180,
                  endAngle: ((360 + -angle) * Math.PI) / 180,
                },
                style: {
                  stroke: "#0CD3DB",
                  fill: "transparent",
                  lineWidth: 0.5,
                },
                silent: true,
              };
            },
            data: [0],
          },
          // 外环
          {
            name: "",
            type: "pie",
            radius: ["85%", "70%"],
            center: ["50%", "45%"],
            startAngle: 270,
            z: 0,
            zlevel: 0,

            label: {
              show: true, // false不显示饼图上的标签
              position: 'center', // inside（在饼图上显示）,outside(默认就会出现引导线) center
              formatter: '{d}%',
              fontWeight: 'bold',
              fontSize: this.$utils.transformFontSize(14),
              color: '#fff'
            },
            data: [
              {
                value: this.value,
                name: "",
                itemStyle: {
                  normal: {
                    // 外环发光
                    borderWidth: 0.5,
                    // borderColor: this.ringColor,
                    // shadowColor: this.ringColor,
                    color: {
                      // 圆环的颜色
                      colorStops: [
                        {
                          offset: 0,
                          color: this.ringColor[0] || "#9EE6E6", // 起始颜色（浅色）
                        },
                        {
                          offset: 1,
                          color: this.ringColor[1] || "#FECFEF", // 结束颜色（深色）
                        },
                      ],
                    },
                  },
                },
              },
              {
                value: 100 - this.value,
                name: "",
                label: {
                  normal: {
                    show: false,
                  },
                },
                itemStyle: {
                  normal: {
                    color: "#173164",
                  },
                },
              },
            ],
          },
        ],
      },
    };
  },
  mounted() {
    // this.initData();
  },
  methods: {
    initData() {
      this.chart.tooltip.formatter = (p) => this.formatter(p, "小时");
      this.$api.summary.get_berthlvy().then((val) => {
        const obj = [
          {
            name: "9号",
            type: "line",
            data: this.mapNull(val["9hbw"], "SHICHANG"),
          },
          {
            name: "10号",
            type: "line",
            data: this.mapNull(val["10hbw"], "SHICHANG"),
          },
          {
            name: "14号",
            type: "line",
            data: this.mapNull(val["14hbw"], "SHICHANG"),
          },
        ];
        this.chart.series = obj;
      });
    },
    formatter(params, unit) {
      let relVal = params[0].name + "月";
      for (let i = 0, l = params.length; i < l; i++) {
        relVal += "<br/>" + params[i].marker;
        let v = "";
        if (params[i].value) {
          v = `${params[i].seriesName} ：${this.$utils.roundFun(
            params[i].value,
            2
          )}  ${unit}`;
        } else {
          v = "-";
        }
        relVal += v;
      }
      return relVal;
    },
    mapNull(data, filed) {
      return data.map((t) => {
        if (t[filed] === "0") {
          return "";
        }
        return t[filed];
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.chart-container {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-around;
  .chart {
    width: 100%;
    height: 100%;
  }

  .chart-info {
    width: 100%;
    padding-left: 5px;
    margin-top: 10px;
    position: absolute;
    margin: 0 auto;
    text-align: center;
    top: 75%;
    .title1 {
      font-size: 14px;
      color: rgba(220, 243, 255, 0.85);
      font-family: SourceHanSansCN-Normal;
      letter-spacing: 2px;
      display: inline-block;
      box-sizing: border-box;
      margin: 0px 0px 2px;
      white-space: nowrap;
      pointer-events: none;
    }

    .value-container {
      line-height: 30px;
      display: flex;
      justify-content: space-around;
      .value {
        padding: 0px;
        display: flex;
        font-size: 16px;
        font-family: "庞门正道标题体-免费商用";
        flex: 0 1 0%;
        margin: 0px;
        color: rgb(255, 255, 255);
        pointer-events: none;
        margin: 0px 1px;
        transform: translate3d(0px, 0px, 0px);
        font-size: inherit;
        width: auto;
        flex: 0 1 0%;
        text-align: center;
        text-shadow: rgb(0, 187, 255) 0px 0px 10px;
        height: 30px;
      }

      .unit {
        font-size: 14px;
        font-family: "SourceHanSansCN-Medium";
        color: rgba(220, 243, 255, 0.5);
        transform: translate3d(8px, 0px, 0px);
        display: inline-block;
        text-align: center;
      }
    }
  }
}
</style>
